﻿<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header">
            <div class="header bordered-pink">UI Bootstrap Buttons</div>
            <div class="buttons-preview">
                <div ng-controller="ButtonsCtrl">
                    <h4>Single toggle</h4>
                    <pre>{{singleModel}}</pre>
                    <button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
                        Single Toggle
                    </button>
                    <h4>Checkbox</h4>
                    <pre>{{checkModel}}</pre>
                    <div class="btn-group">
                        <label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>Left</label>
                        <label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</label>
                        <label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</label>
                    </div>
                    <h4>Radio &amp; Uncheckable Radio</h4>
                    <pre>{{radioModel || 'null'}}</pre>
                    <div class="btn-group">
                        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
                        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
                        <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
                    </div>
                    <div class="btn-group">
                        <label class="btn btn-success" ng-model="radioModel" btn-radio="'Left'" uncheckable>Left</label>
                        <label class="btn btn-success" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Middle</label>
                        <label class="btn btn-success" ng-model="radioModel" btn-radio="'Right'" uncheckable>Right</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header">
            <div class="header bordered-azure">UI Bootstrap Dropdown Button</div>
            <div class="buttons-preview">
                <div ng-controller="DropdownCtrl">
                    <!-- Simple dropdown -->
                    <span class="dropdown" dropdown on-toggle="toggled(open)">
                        <a href class="dropdown-toggle" dropdown-toggle>
                            Click me for a dropdown.
                        </a>
                        <ul class="dropdown-menu">
                            <li ng-repeat="choice in items">
                                <a href>{{choice}}</a>
                            </li>
                        </ul>
                    </span>
                    <br />
                    <br/>
                    <p>
                        <!-- Single button -->
                        <div class="btn-group" dropdown is-open="status.isopen">
                            <button type="button" class="btn btn-palegreen dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                                Button dropdown <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </p>
                    <!-- Split button -->
                    <div class="btn-group" dropdown>
                        <button type="button" class="btn btn-danger">Action</button>
                        <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
                            <span class="caret"></span>
                            <span class="sr-only">Split button!</span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>

                    <hr />
                    <p>
                        <button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
                        <button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
                    </p>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Basic Buttons</div>
            <div class="buttons-preview">
                <a class="btn btn-link">Link</a>
                <a href="javascript:void(0);" class="btn btn-default">Default</a>
                <a href="javascript:void(0);" class="btn btn-primary">Primary</a>
                <a href="javascript:void(0);" class="btn btn-info">Info</a>
                <a href="javascript:void(0);" class="btn btn-success">Success</a>
                <a href="javascript:void(0);" class="btn btn-warning">Warning</a>
                <a href="javascript:void(0);" class="btn btn-danger">Danger</a>
            </div>
            <div class="footer"><code>.btn .btn-default, .btn-primary, ...</code></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="well with-header  with-footer">
            <div class="header bordered-blue">Colered Buttons</div>
            <div class="buttons-preview">
                <a href="javascript:void(0);" class="btn btn-blue">Blue</a>
                <a href="javascript:void(0);" class="btn btn-sky">Sky</a>
                <a href="javascript:void(0);" class="btn btn-azure">Azure</a>
                <a href="javascript:void(0);" class="btn btn-palegreen">Pale Green</a>
                <a href="javascript:void(0);" class="btn btn-yellow">Yellow</a>
                <a href="javascript:void(0);" class="btn btn-darkorange">Dark Orange</a>
                <a href="javascript:void(0);" class="btn btn-magenta">Magenta</a>
                <a href="javascript:void(0);" class="btn btn-purple">Purple</a>
                <a href="javascript:void(0);" class="btn btn-maroon">Maroon</a>
            </div>
            <div class="footer"><code>.btn .btn-blue, .btn-purple, ...</code></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="well with-header  with-footer">
            <div class="header bordered-blue">Shiny Buttons</div>
            <div class="buttons-preview">
                <a href="javascript:void(0);" class="btn btn-default shiny">Default</a>
                <a href="javascript:void(0);" class="btn btn-primary shiny">Primary</a>
                <a href="javascript:void(0);" class="btn btn-info shiny">Info</a>
                <a href="javascript:void(0);" class="btn btn-success shiny">Success</a>
                <a href="javascript:void(0);" class="btn btn-warning shiny">Warning</a>
                <a href="javascript:void(0);" class="btn btn-danger shiny">Danger</a>
                <a href="javascript:void(0);" class="btn btn-blue shiny">Blue</a>
                <a href="javascript:void(0);" class="btn btn-sky shiny">Sky</a>
                <a href="javascript:void(0);" class="btn btn-azure shiny">Azure</a>
                <a href="javascript:void(0);" class="btn btn-palegreen shiny">Pale Green</a>
                <a href="javascript:void(0);" class="btn btn-yellow shiny">Yellow</a>
                <a href="javascript:void(0);" class="btn btn-darkorange shiny">Dark Orange</a>
                <a href="javascript:void(0);" class="btn btn-magenta shiny">Magenta</a>
                <a href="javascript:void(0);" class="btn btn-purple shiny">Purple</a>
                <a href="javascript:void(0);" class="btn btn-maroon shiny">Maroon</a>
            </div>
            <div class="footer"><code>.btn .btn-blue .shiny, .btn-purple .shiny, ...</code></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header  with-footer">
            <div class="header bordered-blue">Sized Buttons</div>
            <div class="buttons-preview">
                <a href="javascript:void(0);" class="btn btn-blue btn-lg">Large</a>
                <a href="javascript:void(0);" class="btn btn-yellow">Default</a>
                <a href="javascript:void(0);" class="btn btn-darkorange btn-sm">Small</a>
                <a href="javascript:void(0);" class="btn btn-palegreen btn-xs">Mini</a>
            </div>
            <div class="footer"><code>.btn .btn-lg, .btn-sm, .btn-xs</code></div>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header  with-footer">
            <div class="header bordered-blue">Circle Buttons</div>
            <div class="buttons-preview">
                <a href="javascript:void(0);" class="btn btn-warning  btn-circle btn-lg"><i class="glyphicon glyphicon-camera"></i></a>
                <a href="javascript:void(0);" class="btn btn-info  btn-circle"><i class="glyphicon glyphicon-retweet"></i></a>
                <a href="javascript:void(0);" class="btn btn-danger btn-circle btn-sm"><i class="glyphicon glyphicon-list"></i></a>
                <a href="javascript:void(0);" class="btn btn-default  btn-circle btn-xs"><i class="glyphicon glyphicon-ok"></i></a>
            </div>
            <div class="footer"><code>.btn .btn-circle</code></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Buttons With Icon</div>
            <div class="buttons-preview">
                <a class="btn btn-default purple" href="javascript:void(0);"><i class="fa fa-plus"></i> Add</a>
                <a class="btn btn-primary" href="javascript:void(0);"><i class="fa fa-shopping-cart"></i> Buy</a>
                <a class="btn btn-danger" href="javascript:void(0);"><i class="fa fa-times"></i> Delete</a>
                <a class="btn btn-success" href="javascript:void(0);">Ok <i class="fa fa-check right"></i></a>
                <a class="btn btn-info" href="javascript:void(0);">Info <i class="fa fa-warning right"></i></a>

            </div>
            <div class="footer"><code>< i class="fa fa-times" /></code></div>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Labeled Buttons</div>
            <div class="buttons-preview">
                <a href="javascript:void(0);" class="btn btn-labeled btn-palegreen">
                    <i class="btn-label glyphicon glyphicon-ok"></i>Success
                </a>
                <a href="javascript:void(0);" class="btn btn-labeled btn-darkorange">
                    <i class="btn-label glyphicon glyphicon-remove"></i>Error
                </a>
                <a href="javascript:void(0);" class="btn btn-labeled btn-yellow">
                    <i class="btn-label fa fa-warning"></i>Warning
                </a>
                <a href="javascript:void(0);" class="btn btn-labeled btn-blue">
                    <i class="btn-label fa fa-exclamation"></i>Info
                </a>
            </div>
            <div class="footer"><code>.btn .btn-labeled</code></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Icon Buttons</div>
            <div class="buttons-preview">
                <a class="btn btn-default btn-lg shiny icon-only blue" href="javascript:void(0);"><i class="fa fa-plus"></i></a>
                <a class="btn btn-default shiny icon-only yellow" href="javascript:void(0);"><i class="fa fa-lock "></i></a>
                <a class="btn btn-default btn-sm shiny icon-only danger" href="javascript:void(0);"><i class="fa fa-times "></i></a>
                <a class="btn btn-default btn-xs shiny icon-only success" href="javascript:void(0);"><i class="fa fa-cog"></i></a>
                <hr class="wide" />
                <a class="btn btn-blue btn-lg icon-only white" href="javascript:void(0);"><i class="fa fa-plus"></i></a>
                <a class="btn btn-yellow icon-only white" href="javascript:void(0);"><i class="fa fa-lock"></i></a>
                <a class="btn btn-danger btn-sm icon-only white" href="javascript:void(0);"><i class="fa fa-times "></i></a>
                <a class="btn btn-success btn-xs icon-only white" href="javascript:void(0);"><i class="fa fa-cog"></i></a>
            </div>
            <div class="footer"><code>.btn .icon-only</code></div>
        </div>
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Block Buttons</div>
            <div class="clearfix">
                <a href="#" class="btn btn-yellow btn-block shiny">Link</a>
                <button class="btn btn-warning btn-block">Button</button>
                <input type="button" class="btn btn-darkorange btn-block" value="Input">
                <input type="submit" class="btn btn-danger btn-block" value="Submit">
            </div>
            <div class="footer"><code>.btn .btn-block</code></div>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">DropDown Buttons</div>
            <div class="buttons-preview">
                <div class="btn-group">
                    <a class="btn btn-default shiny " href="javascript:void(0);">Default</a>
                    <a class="btn btn-default  dropdown-toggle shiny" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-primary shiny" href="javascript:void(0);">Primary</a>
                    <a class="btn btn-primary dropdown-toggle shiny" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-primary">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-danger shiny">Danger</a>
                    <a class="btn btn-danger dropdown-toggle shiny" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-danger" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-warning shiny">Warning</a>
                    <a class="btn btn-warning dropdown-toggle shiny" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-warning" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <hr class="wide" />
                <div class="btn-group">
                    <a class="btn btn-lg btn-default" href="javascript:void(0);">Large</a>
                    <a class="btn btn-lg btn-default  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-blue" href="javascript:void(0);">Default</a>
                    <a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-blue">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-sm btn-darkorange">Small</a>
                    <a class="btn btn-sm btn-darkorange dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-darkorange" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-xs btn-yellow">mini</a>
                    <a class="btn btn-xs btn-yellow dropdown-toggle" data-toggle="dropdown"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-yellow" role="menu">
                        <li>
                            <a href="#">Action</a>
                        </li>
                        <li>
                            <a href="#">Another action</a>
                        </li>
                        <li>
                            <a href="#">Something else here</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <hr class="wide" />
                <div class="btn-group dropup">
                    <a class="btn btn-default shiny">
                        Drop Up
                    </a>
                    <a class="btn btn-default dropdown-toggle shiny" data-toggle="dropdown">
                        <i class="fa fa-angle-up"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group dropup">
                    <a class="btn btn-sky shiny">
                        Drop Up
                    </a>
                    <a class="btn btn-sky dropdown-toggle shiny" data-toggle="dropdown">
                        <i class="fa fa-angle-up"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-sky">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group dropup">
                    <a class="btn btn-magenta shiny">
                        Drop Up
                    </a>
                    <a class="btn btn-magenta dropdown-toggle shiny" data-toggle="dropdown">
                        <i class="fa fa-angle-up"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-magenta">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group dropup">
                    <a class="btn btn-purple shiny">
                        Drop Up
                    </a>
                    <a class="btn btn-purple dropdown-toggle shiny" data-toggle="dropdown">
                        <i class="fa fa-angle-up"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-purple">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <hr class="wide" />
                <div class="btn-group">
                    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Action <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-azure dropdown-toggle" data-toggle="dropdown">
                        Action <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-azure">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-maroon dropdown-toggle" data-toggle="dropdown">
                        Action <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-maroon">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <hr class="wide" />
                <div class="btn-group">
                    <a class="btn btn-success" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-palegreen dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-palegreen">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-danger" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-warning">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-maroon" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-magenta dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-magenta">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-azure" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-blue">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-success" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-darkorange dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-darkorange">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-darkorange whitesmoke" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-danger">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-blue whitesmoke" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-palegreen dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-palegreen">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-palegreen whitesmoke" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-yellow dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-yellow">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-magenta whitesmoke" href="javascript:void(0);">Combined</a>
                    <a class="btn btn-maroon dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-maroon">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer"><code></code></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Button Groups</div>
            <div class="buttons-preview">
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">
                            1
                        </button>
                        <button type="button" class="btn btn-default">
                            2
                        </button>
                        <button type="button" class="btn btn-default">
                            3
                        </button>
                        <button type="button" class="btn btn-default">
                            4
                        </button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">
                            5
                        </button>
                        <button type="button" class="btn btn-default">
                            6
                        </button>
                        <button type="button" class="btn btn-default">
                            7
                        </button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default">
                            8
                        </button>
                    </div>
                </div>
                <hr class="wide" />
                <div class="btn-group">
                    <button type="button" class="btn btn-default">
                        <i class="fa fa-align-left"></i>
                    </button>
                    <button type="button" class="btn btn-default">
                        <i class="fa fa-align-center"></i>
                    </button>
                    <button type="button" class="btn btn-default">
                        <i class="fa fa-align-right"></i>
                    </button>
                    <button type="button" class="btn btn-default">
                        <i class="fa fa-align-justify"></i>
                    </button>
                </div>
                <hr class="wide" />
                <div class="btn-group">
                    <button type="button" class="btn btn-default"><i class="fa fa-user"></i> Profile</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-cogs"></i> Settings</button>
                    <button type="button" class="btn btn-default"><i class="fa fa-bullhorn"></i> Feeds</button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-ellipsis-horizontal"></i> More <i class="fa fa-angle-down"></i>
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#">Dropdown link</a>
                            </li>
                            <li>
                                <a href="#">Dropdown link</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <hr class="wide" />

            <div class="btn-group-vertical">
                <button type="button" class="btn btn-default">Button</button>
                <div class="btn-group">
                    <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Dropdown <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
                        <li>
                            <a href="#">Dropdown link</a>
                        </li>
                        <li>
                            <a href="#">Dropdown link</a>
                        </li>
                    </ul>
                </div>
                <button type="button" class="btn btn-default">Button</button>
                <button type="button" class="btn btn-default">Button</button>
                <div class="btn-group">
                    <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        Dropdown <i class="fa fa-angle-down"></i>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
                        <li>
                            <a href="#">Dropdown link</a>
                        </li>
                        <li>
                            <a href="#">Dropdown link</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="btn-group-vertical">
                <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-left"></i></a>
                <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-center"></i></a>
                <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-right"></i></a>
                <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-justify"></i></a>
            </div>
            <div class="btn-group-vertical">
                <button type="button" class="btn btn-default">
                    Top
                </button>
                <button type="button" class="btn btn-default">
                    Middle
                </button>
                <button type="button" class="btn btn-default">
                    Bottom
                </button>
            </div>
            <div class="footer"><code>.btn .btn-group .btn-group-vertical</code></div>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Justified Buttons</div>
            <div class="buttons-preview">
                <div class="btn-group btn-group-justified">
                    <a href="#" class="btn btn-default">Left</a>
                    <a href="#" class="btn btn-default">Middle</a>
                    <a href="#" class="btn btn-default">Right</a>
                </div>
                <div class="btn-group btn-group btn-group-justified">
                    <a href="#" class="btn btn-palegreen">Good</a>
                    <a href="#" class="btn btn-warning">Bad</a>
                    <a href="#" class="btn btn-danger">Ugly</a>
                </div>

            </div>
            <div class="footer"><code>.btn-group .btn-group-justified</code></div>
        </div>
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Active Buttons</div>
            <div class="buttons-preview">
                <button type="button" class="btn btn-blue active">Active button</button>
                <button type="button" class="btn btn-darkorange active"> Active Button</button>
            </div>
            <div class="footer"><code>.btn .active"</code></div>
        </div>
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Disabled Buttons</div>
            <div class="buttons-preview">
                <button type="button" class="btn btn-yellow" disabled="disabled">Primary button</button>
                <button type="button" class="btn btn-palegreen" disabled="disabled">Button</button>
            </div>
            <div class="footer"><code>disabled="disabled"</code></div>
        </div>
    </div>
</div>